﻿<!DOCTYPE html>
<html style="overflow-y:hidden;background-color: transparent;">
<head>
    <title>这里是一个标题。不过你为什么会看到这个？</title>
    <style>

        /* @font-face{
            font-family: "genshin";
            src:url(/webfonts/genshin.ttf);
        } */

        html {
            width: 100vw;
            height: 100vh;
        }

        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
            /* font-family: 'genshin'; */
        }

        body {
            background-color: #00000000;
            width: 1600px;
            user-select: none;
            overflow: hidden;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }

        #backgroundImg {
            position: absolute;
            z-index: -11451;
            width: 100%;
            height: 100%;
            image-rendering: optimizeQuality;
            pointer-events: none;
            user-select: none;
        }

        #referImg {
            position: absolute;
            z-index: -11449;
            width: 100%;
            height: 100%;
        }

        .backgroundmask {
            position: absolute;
            z-index: -11450;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, rgba(44, 42, 80, 0.644) 0%,rgba(57, 54, 88, 0.479) 20%,  rgba(107, 107, 107, 0.295) 100%);
        }

        #appcontainer {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }


        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        ::-webkit-scrollbar-thumb {
            background-color: rgb(237, 229, 218);
            border-radius: 3px;
            width: 5px;
            height: 5px;
            border: solid rgba(0, 0, 0, 0.247) 1px;
        }
    </style>
    <script src="zquery.js"></script>
    <script src="marked.min.js"></script>
    <link rel="stylesheet" href="buefy.min.css">
    <link rel="stylesheet" href="css/all.css">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/markdown_mod.css">
</head>
<body id="body">
    <img id="backgroundImg" />

    <div class="backgroundmask">
    </div>
    <div id="appcontainer">
        <div id="app"></div>
    </div>
    <script>
        function reloadBackgroundImage() {
            $("#backgroundImg").img("/api/image/background.jpg?random=" + Math.random());
        }
        var resizeToFixedRatio = true;
        var debugActualSize = false;
        function resizeAppArea() {
            var container = document.body;
            var targetW = 1600;
            var currentW = window.innerWidth;
            var currentH = window.innerHeight;
            
            var targetH = targetW * currentH / currentW;

            if(resizeToFixedRatio){
                targetH = targetW * 9 / 16;
            }
            var scaleFactor = 1;


            if (currentW * targetH / targetW < currentH) {
                scaleFactor = currentW * 1.0 / targetW;
            }
            else {
                scaleFactor = currentH * 1.0 / targetH;
            }

            if(debugActualSize){
                scaleFactor = 1;
            }

            container.style.transform = "translate(-50%,-50%) scale(" + scaleFactor + "," + scaleFactor + ")"
            container.style.height = targetH + "px";

        }


        window._lastType = 3;
        window._currentType = -1;

        document.body.onresize = function (dom, e) {
            resizeAppArea();
        }

        document.body.onload = function (dom, e) {
            resizeAppArea();
        }

    </script>



    <script src="api/script/undebug.js"></script>
    <script src="vue.js"></script>
    <script src="buefy.min.js"></script>
    <script src="vue2-sfc-loader.js"></script>
    <script>

        if(resizeToFixedRatio){
            // $("#referImg").css("display","block");
        }

        reloadBackgroundImage();
        resizeAppArea();
        Vue.prototype.$buefy.config.setOptions({
            defaultIconPack: 'fas',
        })
        const { loadModule, vueVersion } = window['vue2-sfc-loader'];

        const options = {
            moduleCache: {
                vue: Vue,
            },
            getFile(url) {
                return new Promise((resolve, reject) => {
                    $.ajax(url, {}).then(r => {
                        resolve(r);
                    }).catch(err => {
                        reject(err);
                    });
                });
            },
            addStyle(newStyle) {
                var styleElement = document.getElementById('styles_js');
                if (!styleElement) {
                    styleElement = document.createElement('style');
                    styleElement.type = 'text/css';
                    styleElement.id = 'styles_js';
                    document.getElementsByTagName('head')[0].appendChild(styleElement);
                }
                styleElement.appendChild(document.createTextNode(newStyle));
            },
        }
        loadModule('./AppMain.vue', options)
            .then(component => new Vue(component).$mount('#app'));

    </script>
</body>
</html>